<template>
  <div class="project-module">
    <div class="tool-bar">
      <div class="menu-list">
        <el-dropdown @command="handleMenu" class="menu-item" trigger="click" placement="bottom">
          <span class="el-dropdown-link">{{menuList[currentIndex].name}}<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu>
            <el-dropdown-item :command="index" v-for="(menu, index) in menuList" :key="menu.searchType">{{menu.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="menu-item">
          <img style="width: 14px; height: 14px;" src="../../../assets/livolobim/filter.png" @click="openFilterDialog">
          <div v-if="hasFilter" class="dot"></div>
        </div>
      </div>
    </div>
    <div class="content" ref="scrollcontainer" v-infinite-scroll="loadProject" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
      <div v-for="item in projectList" :key="item.id">
        <div class="task-item" @click="openProjectDetail(item.id)">
          <div v-if="item.taskDeleteStatus !== '4'">
            <span class="arrow-status" :class="'arrow-'+item.taskStatus"></span>
            <span class="task-status" v-if="item.taskStatus === '1'">待完成</span>
            <span class="task-status" v-if="item.taskStatus === '2'">待确认</span>
            <span class="task-status" v-if="item.taskStatus === '3'">已完成</span>
          </div>
          <div v-if="item.taskDeleteStatus === '4'">
            <span class="arrow-status" :class="'arrow-4'"></span>
            <span class="task-status">已归档</span>
          </div>
          <div class="top">
            <div class="logo">
              <img :src="item.taskUrl? 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/project/'+item.taskUrl : 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/project/icon%20orange-1.png'"  style="border-radius: 5px;width: 48px; height: 48px;">
            </div>
            <div class="task-info">
              <p>{{item.taskName}}</p>
              <p class="project"><span>{{item.taskBelongName}}</span></p>
            </div>
          </div>
            <div class="prograss">
              <el-progress :percentage="item.statistics ? item.statistics.completePercent : 0" color="#4495FF"></el-progress>
            </div>
            <div class="bottom">
              <p v-if="item.statistics">任务数：{{item.statistics.totalAmount}}
                <span class="overdue" v-if="item.statistics.overdueAmount > 0">（逾期{{item.statistics.overdueAmount}}）</span>
              </p>
              <p v-else>任务数：0</p>
              <p><i class="el-icon-user"></i>{{item.taskPrincipalName}}</p>
            </div>
        </div>
      </div>
      <img v-if="projectList.length === 0 && !isFirstLoading" style="width:200px;margin: auto;position:absolute;top:0;right:0;left:0;bottom: 0;" src="../../../assets/livolobim/empty.png" alt="">
    </div>
    <div style="text-align: center; line-height: 24px; color: #979797;" v-if="totalCount > 0">共有{{totalCount}}个项目</div>
    <div @click="addProject" class="add-btn" :style="{'bottom': bottomBtnPosition}"><i class="el-icon-plus"></i></div>
    <FilterPage title="项目筛选" page="project" @filterData="filterData" ref="filterpage"/>
    <Tab currentTab="project"/>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import Tab from './component/Tab'
import FilterPage from './component/FilterPage'
import formUtil from "@/utils/formUtil";

export default {
  data() {
    return {
      bottomBtnPosition: '20px',
      currentIndex: 3,
      menuList: [{searchType: 1, name: '参与的项目'}, {searchType: 2, name: '关注的项目'}, {searchType: 3, name: '可见项目'}, {searchType: 4, name: '我负责的'}, {searchType: 5, name: '我管理的'}, {searchType: 8, name: '我确认的'}, {searchType: 6, name: '已归档项目'}],
      projectList: [],
      plateIds: [],
      projectIds: [],
      isFirstLoading: true,
      loading: false,
      page: 1,
      limit: 20,
      totalPage: 1,
      totalCount: 0,
      postForm: {
        filterPrincipalIds: '',
        plateIds: '',
        taskName: '',
        filterStartPlanFinishTime: '',
        filterEndPlanFinishTime: '',
      },
      currentScrollTop: 0,
    }
  },
  mixins: [dingMixin],
  components: {
    Tab, FilterPage
  },
  beforeRouteLeave(to,from,next) {
    this.currentScrollTop = this.$refs.scrollcontainer.scrollTop;
    this.mobileStopRefresh()
    next()
  },
  activated() {
    this.mobileGetDevice(({model, brand, version}) => {
      if(brand === 'iPhone') {
        this.mobildPullToRefresh(() => {
          this.getProjectList(true)
        });
      }
    })
    if(window.NEEDREFRESH) {
      this.getProjectList(true)
      window.NEEDREFRESH = false;
    }else {
      this.$refs.scrollcontainer.scrollTop = this.currentScrollTop;
    }
  },
  methods: {
    async filterData(param) {
      this.postForm = formUtil.deepCopy(param);
      await this.getProjectList(true);
    },
    openFilterDialog() {
      this.$refs.filterpage.init();
    },
    handleMenu(index) {
      this.currentIndex = index;
      this.getProjectList(true);
    },
    loadProject() {
      this.loading = true;
      this.page ++;
      this.getProjectList();
    },
    //获取项目列表
    async getProjectList(init) {
      if(init) {
        this.page = 1;
        this.projectList = [];
        this.isFirstLoading = true;
      }
      var obj = {
        searchType: this.menuList[this.currentIndex].searchType,
        sectionType: 1,
        plateIds: this.postForm.plateIds,
        filterPrincipalIds: this.postForm.filterPrincipalIds,
        taskName: this.postForm.taskName,
        filterStartPlanFinishTime: this.postForm.filterStartPlanFinishTime,
        filterEndPlanFinishTime: this.postForm.filterEndPlanFinishTime,
        page: this.page,
        limit: this.limit
      }

      let {list, totalPage, totalCount} = await this.$httpN.postB('division/task/filterProjectList', obj);
      this.plateIds = [];
      this.projectIds = [];
      list.forEach(item => {
        this.projectList.push(item);
        if(!this.plateIds.includes(item.taskBelongId))  this.plateIds.push(item.taskBelongId);
        this.projectIds.push(item.id);
      })
      await this.getAllStatistics(this.plateIds.join(','), this.projectIds.join(','));

      this.loading = false;
      if(init) {
        this.totalPage = totalPage;
        this.totalCount = totalCount;
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
    async getAllStatistics(plateIds, projectIds) {
      await this.$httpN.postB('division/statistics/statisticsByCustomize', {plateIds: plateIds, projectIds: projectIds}).then(res => {
        let $this = this;
        this.projectIds.map(function(val,index) {
          let a = 0;
          res.map(function(val2) {
            if(val === val2.projectId) {
              $this.$set($this.projectList[$this.limit*($this.page-1)+index], 'statistics', val2);
              a++;
            }
          })
          if(a === 0) {
            $this.$set($this.projectList[$this.limit*($this.page-1)+index], 'statistics', {
              completePercent: 100,
              totalAmount: 0,
              overdueAmount: 0
            });
          }
        });
      })
    },
    openProjectDetail(projectId) {
      this.$router.push({ name: 'mlivolobim-projectDetail', params: {projectId: projectId}});
    },
    addProject() {
      this.$router.push({ name: 'mlivolobim-addOrUpdateProject'});
    }
  },
  computed: {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.page >= this.totalPage;
    },
    hasFilter() {
      return !(this.postForm.filterPrincipalIds === '' && this.postForm.taskName === '' && this.postForm.plateIds === '' && this.postForm.filterStartPlanFinishTime === '' && this.postForm.filterEndPlanFinishTime === '')
    }
  },
  async mounted() {
    this.mobileGetDevice(({model, brand, version}) => {
      if(brand === 'iPhone' && ( model.indexOf('10') > 0 || model.indexOf('11') > 0)) {
        this.bottomBtnPosition = '66px';
      }
    })
    await this.getProjectList(true);
  }
}
</script>

<style lang="scss" scoped>
.project-module {
  height: calc(100vh - 46px);
  box-shadow: 4px 4px 4px rgb(221, 221, 221);
  position: relative;
  .tool-bar {
    background-color: #FFF;
    height: 46px;
    line-height: 46px;
    .menu-list {
      display: flex;
      flex-wrap: wrap;
      justify-content:space-between;
      align-content: flex-start;
      .menu-item {
        padding: 0 20px;
        text-align: center;
        > i {
          margin-right: 20px;
          &:last-child {
            margin-right: 0;
          }
        }
        .dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #4983FF;
          display: inline-block;
          vertical-align: super;
        }
      }
      .active {
        color: #4983FF;
      }
    }
  }
  .content{
    height: calc(100% - 46px - 24px);
    overflow-y: auto;
    .task-item{
      width: calc(100% - 40px);
      margin: 20px;
      background-color: #FFF;
      border-radius: 5px;
      box-shadow: 0px 0px 1px rgb(221, 221, 221);
      padding: 20px 30px;
      cursor: pointer;
      position: relative;
      .arrow-status{
        width:0;
        height:0;
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 5px;
        border-top:solid 30px #4495FF;
        border-left:solid 30px #4495FF ;
        border-bottom:solid 30px transparent;
        border-right:solid 30px transparent;
        &.arrow-1{
          border-top:solid 30px #4495FF;
          border-left:solid 30px #4495FF ;
        }
        &.arrow-2{
          border-top:solid 30px #E6A23C;
          border-left:solid 30px #E6A23C ;
        }
        &.arrow-3{
          border-top:solid 30px #B0C7CD;
          border-left:solid 30px #B0C7CD ;
        }
        &.arrow-4{
          border-top:solid 30px #909399;
          border-left:solid 30px #909399 ;
        }
      }
      .task-status{
        position: absolute;
        width: 60px;
        line-height: 20px;
        left: -6px;
        top: 11px;
        color: white;
        font-size: 12px;
        transform: rotate(-45deg);
        text-align: center;
        font-weight: normal;
      }
      &::after{
        content: '';
        width:0;
        height:0;
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 5px;
        border-top:solid 15px white;
        border-left:solid 15px white ;
        border-bottom:solid 15px transparent;
        border-right:solid 15px transparent;
      }
      .top{
        display:flex;
        margin-bottom: 10px;
        .logo{
          width: 48px;
          height: 48px;
          text-align: center;
          background: #E6A23C;
          border-radius: 4px;
          i{
            line-height: 48px;
            font-size: 30px;
            color: #FFF;
          }
        }
        .task-info{
          p{
            margin: 0;
            padding-left:10px;
          }
          .project{
            margin-top: 15px;
            span{
              background: #FFDCDC;
              color: #FF5050;
              padding: 2px 6px;
              border-radius: 3px;
            }
          }
        }
      }
      .bottom{
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        align-content: flex-start;
        p{
          margin: 5px 0 0 0 ;
          color: #79828C;
          i{
            margin-right: 5px;
          }
        }
        .overdue {
          color: #FF5050;
        }
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .add-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #409EFF;
    background-image: linear-gradient(#79BBFF, #409EFF);
    box-shadow: 1px 1px 1px rgb(221, 221, 221);
    text-align: center;
    color: #FFF;
    font-size: 1.5rem;
    line-height: 40px;
  }
}
</style>